<template>
  <el-dialog
    v-el-drag-dialog
    :title="`自动催单设置-${temp.orgName}`"
    :visible.sync="visible"
    width="800px"
    @closed="reset"
  >
    <el-form ref="dataForm" class="form" label-position="left" label-width="80px">
      <el-form-item label="月份:">
        <el-select v-model="query.startMonth" style="width: 100px;" placeholder="请选择">
          <el-option
            v-for="(i, ind) in staData"
            :key="ind"
            :label="i.value"
            :value="i.id"
          />
        </el-select>
        ~
        <el-select v-model="query.endMonth" style="width: 100px;" placeholder="请选择">
          <el-option
            v-for="(i, ind) in staData"
            :key="ind"
            :label="i.value"
            :value="i.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="催单时段:" style="width: 100%;">
        <div v-for="(i, ind ) in periodList" :key="ind" class="time">
          <!-- <el-time-picker
            v-model="i.data"
            format="HH:mm"
            :picker-options="{
              selectableRange: '18:30:00 - 20:30:00'
            }"
            placeholder="任意时间点"
          /> -->
          <el-time-picker
            v-model="i.data"
            is-range
            format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          />
          &nbsp;&nbsp;
          <el-button v-if="ind===0" type="primary" @click="addTime1">
            增加
          </el-button>
          <el-button v-else type="primary" @click="delTime1(ind)">
            删除
          </el-button>
        </div>

      </el-form-item>
      <el-form-item label="催单间隔:" style="width: 100%;">
        <div v-for="(i, ind ) in query.intervalList" :key="ind" class="time">
          <el-input v-model="i.reminderTime" style="width: 100px;" @input="dealInput(i)" @blur="onBlur(i)" /><span>{{ '分钟 第'+(ind+1)+'次催单' }}</span>
          <el-button v-if="ind===0" type="primary" @click="addTime">
            增加
          </el-button>
          <el-button v-else type="primary" @click="delTime(ind)">
            删除
          </el-button>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%;">
        <el-checkbox v-model="checked">退单过程中不催单</el-checkbox>
        <el-checkbox v-model="checked1">退单重新分派后不继续催单</el-checkbox>
      </el-form-item>

      <el-form-item label-width="0" style="width: 100%;">
        注：1.第一次间隔从下单时间开始计算,之后则从前一个间隔结束时间开始计算,非催单时段内的时间不计算;
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2.开启自动催单之后修改催单规则,修改之后新增订单按新规则催单,修改之前的订单按原规则催单;
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        关闭
      </el-button>
      <el-button type="primary" @click="success">
        保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { voluntarilyReminderChangeSave } from '@/api'
  import moment from 'dayjs'

  export default {
    name: 'add',
    data() {
      return {
        visible: false,
        checked: false,
        checked1: false,
        staData: [
          { id: 1, value: '1' },
          { id: 2, value: '2' },
          { id: 3, value: '3' },
          { id: 4, value: '4' },
          { id: 5, value: '5' },
          { id: 6, value: '6' },
          { id: 7, value: '7' },
          { id: 8, value: '8' },
          { id: 9, value: '9' },
          { id: 10, value: '10' },
          { id: 11, value: '11' },
          { id: 12, value: '12' }
        ],
        query: {
          startMonth: 1,
          endMonth: 12,
          intervalList: [
            { reminderTime: '' }
          ]
        },
        periodList: [
          { data: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] }
        ],
        temp: {}
      }
    },
    computed: {
    },
    async created() {
    },
    methods: {
      open(temp) {
        this.temp = temp
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 增加事件间隔
      addTime() {
        const obj = {
          reminderTime: ''
        }
        this.query.intervalList.push(obj)
      },
      addTime1() {
        const obj = {
          data: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
        }
        this.periodList.push(obj)
      },
      // 删除时间间隔
      delTime(ind) {
        console.log('ind', ind)
        this.query.intervalList.splice(ind, 1)
      },
      delTime1(ind) {
        console.log('ind', ind)
        this.periodList.splice(ind, 1)
      },
      dealInput(i) {
        i.reminderTime = i.reminderTime.replace(/[^\d]/g, '')
      },
      onBlur(i) {
        if (i.reminderTime && i.reminderTime === '0') {
          i.reminderTime = '1'
        }
        if (i.reminderTime && i.reminderTime.length > 4) {
          i.reminderTime = i.reminderTime.slice(0, 4)
        }
      },
      async success() {
        console.log('this.periodList', this.periodList)
        if (this.query.startMonth > this.query.endMonth) {
          this.$message({
            message: '配置催单开始月份不能大于催单结束月份',
            type: 'warning'
          })
          return
        }
        // 校验催单间隔时间
        if (this.query.intervalList.length > 0) {
          const flag = this.query.intervalList.every(item => item.reminderTime !== '')
          if (!flag) {
            this.$message({
              message: '存在催单间隔时间未设置,不允许提交',
              type: 'warning'
            })
            return
          }
          const flag1 = this.query.intervalList.every(item => (item.reminderTime * 1) >= 30)
          if (!flag1) {
            this.$message({
              message: '催单时间间隔不能小于30分钟',
              type: 'warning'
            })
            return
          }
          const arr = []
          this.query.intervalList.map(item => {
            arr.push(item.reminderTime)
          })
          // 催单时段校验
          const flag2 = this.periodList.every(item => item.data !== null)
          console.log('flag2', flag2)

          if (!flag2) {
            this.$message({
              message: '请选择催单时间段',
              type: 'warning'
            })
            return
          }
          // 时间大小比较
          const flag3 = this.periodList.every(item => moment(item.data[0]).valueOf() < moment(item.data[1]).valueOf())
          if (!flag3) {
            this.$message({
              message: '催单结束时段应大于催单开始时段',
              type: 'warning'
            })
            return
          }
          var periodDesc = []
          this.periodList.map(item => {
            var str = ''
            const start = this.formatTime(item.data[0])
            const end = this.formatTime(item.data[1])
            str = start + '~' + end
            console.log('str', str)
            periodDesc.push(str)
          })
          const periodList = []
          this.periodList.map(item => {
            const obj = {
              startTimePeriod: moment(item.data[0]).format(),
              endTimePeriod: moment(item.data[1]).format()
            }
            periodList.push(obj)
          })
          const params = {
            orgId: this.temp.orgId,
            ...this.query,
            intervalDesc: arr.join(),
            periodList,
            periodDesc: periodDesc.join()
          }
          // 处理多选
          if (this.checked) {
            params.monthOption |= 1
          }
          if (this.checked1) {
            params.monthOption |= 1 << 1
          }
          console.log('入参', params)
          const { status } = await voluntarilyReminderChangeSave(params)
          if (status === 200) {
            this.visible = false
            console.log(111)
            this.$emit('upDataSet')
          }
        } else {
          this.$message({
            message: '催单间隔时间最少设置一次',
            type: 'warning'
          })
          return
        }
      },
      reset() {
        this.visible = false
        this.checked = false
        this.checked1 = false
        this.temp = {}
        this.query = {
          startMonth: 1,
          endMonth: 12,
          intervalList: [
            { reminderTime: '' }
          ]
        }
        this.periodList = [
          { data: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)] }
        ]
      },
      // 格式化时间
      formatTime(val) {
        var str = ''
        var hours = val.getHours()
        hours = (hours * 1) > 10 ? hours : '0' + hours
        var minutes = val.getMinutes()
        minutes = (minutes * 1) > 10 ? minutes : '0' + minutes
        str = hours + ':' + minutes
        return str
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 50%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .time {
    display: flex;
    align-items: center;
    width: 400px;
    margin-bottom: 6px;
    span {
      margin-right: 4px;
      margin-left: 4px;
    }
  }
}
</style>
